<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <el-card class="box-card">

        <!-- 表格 -->
        <el-table ref="table" :data="dataList" style="width: 100%;" @cell-mouse-enter="showTooltip"
                  @cell-mouse-leave="hideTooltip"
                  :header-cell-style="{background: 'rgba(52, 125, 225, 0.1)', color: '#404248' }" height="450" border
                  stripe v-loading="loading">
          <el-table-column v-if="columns.visible('bizDate')" prop="bizDate" label="业务日期" min-width="120">
            <template slot-scope="scope">
              <i class="el-icon-time" v-if="scope.row.bizDate"></i>
              <span style="margin-left: 10px">{{ scope.row.bizDate }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="columns.visible('jobCode')" prop="jobCode" label="作业编码" min-width="160"/>
          <el-table-column v-if="columns.visible('taskCode')" prop="taskCode" label="作业编码" min-width="160"/>
          <el-table-column v-if="columns.visible('taskName')" prop="taskName" label="作业名称" min-width="160"/>
          <el-table-column v-if="columns.visible('taskStatus')" prop="taskStatus" label="任务状态" min-width="120">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.taskStatus!='3'" size="medium"
                      :type="formatterTaskStatusType(scope.row.taskStatus)">
                {{ formatterTaskStatus(scope.row.taskStatus) }}
              </el-tag>
              <el-tag v-if="scope.row.taskStatus=='3'" class="tag-st" size="medium">
                {{ formatterTaskStatus(scope.row.taskStatus) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column v-if="columns.visible('execStTs')" prop="execStTs" label="开始执行时间" min-width="160"/>
          <el-table-column v-if="columns.visible('execEndTs')" prop="execEndTs" label="执行结束时间" min-width="160"/>
          <el-table-column v-if="columns.visible('crtTs')" prop="crtTs" label="创建时间" min-width="160"/>
          <el-table-column v-if="columns.visible('taskExecLog')" prop="taskExecLog" label="日志" min-width="120">
            <template slot-scope="scope">
              <el-button icon="el-icon-refresh-left" @click="toDetail(scope.row)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>

      </el-card>

      <!-- 查看日志详情 -->
      <el-drawer :visible.sync="isShowLog" direction="rtl" :before-close="handleClose" size="60%">
        <el-input type="textarea" :rows="6" v-model="taskExecLog" :disabled="true"/>
      </el-drawer>

      <el-dialog
        title="执行日志"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <el-input type="textarea" :rows="6" v-model="taskExecLog"/>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import CRUD, {presenter, crud} from '@crud/crud'
import taskStream from '@/api/cycleJob/taskStream'

const defaultCrud = CRUD({
  title: '周期任务流水',
  url: '/api/periodTaskStream/selectPage',
  sort: 'sort,asc',
  queryOnPresenterCreated: false,
  crudMethod: {...taskStream}
})
export default {
  name: 'PeriodTaskStream',
  props: {
    taskCode: {
      type: String,
      default: ''
    },
    bizDate: {
      type: String,
      default: ''
    }
  },
  mixins: [presenter(defaultCrud), crud()],
  dicts: ['task_def_status', 'task_status'],
  data() {
    return {
      dialogVisible: false,
      isShowLog: false,
      dataList: [],
      page: {
        // 页码
        page: 0,
        // 每页数据条数
        size: 10,
        // 总数据条数
        total: 0
      },
      sort: ['id,desc'],
      taskStatusDict: [],
      taskExecLog: '',
      loading: true
    }
  },
  computed: {},
  created() {
    this.refresh()
  },
  methods: {
    //进入时显示提示框
    showTooltip(row) {
      //需要显示浮框的条件
      row.showTooltip = true;
    },
    //退出时隐藏提示框
    hideTooltip(row) {
      row.showTooltip = false;
    },
    sizeChangeHandler(e) {
      this.page.size = e
      this.page.page = 1
      this.refresh();
    },
    // 当前页改变
    pageChangeHandler(e) {
      this.page.page = e
      this.refresh();
    },
    refresh() {
      if (this.taskCode != '') {
        let param = {
          taskCode: this.taskCode,
          bizDate: this.bizDate
        }
        taskStream.selectList(param).then(res => {
          this.dataList = res;
          this.loading = false;
        })
      }
    },
    taskStatusFormatter(val) {
      return this.dict.label.task_def_status[val]
    },
    formatterTaskStatus(val) {
      return this.dict.label.task_status[val]
    },
    formatterTaskStatusType(val) {
      const type = ['', 'info', 'primary', '', 'success', 'danger', 'warning']
      return type[val]
    },
    toDetail(data) {
      //this.isShowLog = true
      this.dialogVisible = true
      this.taskExecLog = data.taskExecLog
    },
    handleClose(done) {
      this.dialogVisible = false
    },
  },
}
</script>
<style>
.crud-opts {
  padding: 6px 0;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}

.crud-opts .crud-opts-right {
  margin-left: auto;
}
</style>
